<template>
    <div class="app-container">
        <div class="Search">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="query">
                    <el-form-item v-has="'PLATFROM_TENANT_QUERY'">
                        <el-cascader ref="tenantTree" placeholder="所属租户" :props="tenantProps" :options="tenantOptions"
                            @change="selectTenant" clearable collapse-tags filterable></el-cascader>
                    </el-form-item>

                    <el-form-item>
                        <el-cascader ref="organTree" placeholder="所属组织" :props="props" :options="organOptions"
                            @change="selectOrgan" collapse-tags clearable filterable></el-cascader>
                    </el-form-item>
                    <el-form-item> <el-input v-model="query.params.firstClassMerchantNo" placeholder="平台商编" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.orderId" placeholder="订单号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.signName" placeholder="子商户签约名" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.merchantType" placeholder="子商户类型" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.merchantCategory" placeholder="经营类别" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.showName" placeholder="展示名（收银台展示）" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.webSite" placeholder="网站网址" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.accessUrl" placeholder="接入地址" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.legalPerson" placeholder="法人名字" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.legalPersonId" placeholder="法人身份证号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.orgNum" placeholder="组织机构代码" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.businessLicense" placeholder="营业执照号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.regionCode" placeholder="区域编码" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.industryTypeCode" placeholder="行业类型编码" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.address" placeholder="通讯地址" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.linkMan" placeholder="联系人" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.linkPhone" placeholder="联系人" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.email" placeholder="联系邮箱" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.bindMobile" placeholder="绑定手机" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.bankCode" placeholder="结算卡联行号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.accountName" placeholder="开户名" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.accountNo" placeholder="开户账号" />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="form.settleBankType" placeholder="结算卡类型">
                            <el-option v-for="item in query.settleBankTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settlementPeriod" placeholder="结算周期" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settlementMode" placeholder="结算方式" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settleMode" placeholder="结算模式, MERCHANT:商户结算，MERGE:合并结算" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.authorizationFlag" placeholder="授权使用大商户秘钥" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.servicePhone" placeholder="客服联系电话" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.unionPayQrCode" placeholder="银联二维码" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.needPosFunction" placeholder="需要开通POS功能（平台商需开通）" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.idCardStartDate" placeholder="法人身份证开始日期" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.idCardEndDate" placeholder="法人身份证结束日期" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.businessDateStart" placeholder="经营起始日期" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.businessDateLimit" placeholder="经营期限" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.accountIdCard" placeholder="开户人身份证" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.mcc" placeholder="mcc" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.agreeProtocol" placeholder="是否同意协议" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.callbackUrl" placeholder="回调地址" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settlementIdCardStartDate" placeholder="结算人身份证开始日期" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settlementIdCardEndDate" placeholder="结算人身份证结束日期" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settlementIdCardNo" placeholder="结算人身份证号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.settlementAuth" placeholder="结算信息鉴权：STOCK 存量,INCREASE 新增" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.createBy" placeholder="生成者" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.updateBy" placeholder="更新者" />
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createDate" type="date" placeholder="生成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createDate" type="date" placeholder="生成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.updateDate" type="date" placeholder="更新时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.updateDate" type="date" placeholder="更新时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.remark" placeholder="备注" />
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </div>

        <div class="block">
            <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit
                highlight-current-row>
                <el-table-column align="center" label="序号" width="95">
                    <template slot-scope="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>

                <el-table-column label="主键" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column label="平台商编" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.firstClassMerchantNo }}
                    </template>
                </el-table-column>
                <el-table-column label="订单号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.orderId }}
                    </template>
                </el-table-column>
                <el-table-column label="子商户签约名" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.signName }}
                    </template>
                </el-table-column>
                <el-table-column label="子商户类型" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.merchantType }}
                    </template>
                </el-table-column>
                <el-table-column label="经营类别" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.merchantCategory }}
                    </template>
                </el-table-column>
                <el-table-column label="展示名（收银台展示）" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.showName }}
                    </template>
                </el-table-column>
                <el-table-column label="网站网址" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.webSite }}
                    </template>
                </el-table-column>
                <el-table-column label="接入地址" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.accessUrl }}
                    </template>
                </el-table-column>
                <el-table-column label="法人名字" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.legalPerson }}
                    </template>
                </el-table-column>
                <el-table-column label="法人身份证号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.legalPersonId }}
                    </template>
                </el-table-column>
                <el-table-column label="组织机构代码" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.orgNum }}
                    </template>
                </el-table-column>
                <el-table-column label="营业执照号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.businessLicense }}
                    </template>
                </el-table-column>
                <el-table-column label="区域编码" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.regionCode }}
                    </template>
                </el-table-column>
                <el-table-column label="行业类型编码" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.industryTypeCode }}
                    </template>
                </el-table-column>
                <el-table-column label="通讯地址" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.address }}
                    </template>
                </el-table-column>
                <el-table-column label="联系人" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.linkMan }}
                    </template>
                </el-table-column>
                <el-table-column label="联系人" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.linkPhone }}
                    </template>
                </el-table-column>
                <el-table-column label="联系邮箱" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.email }}
                    </template>
                </el-table-column>
                <el-table-column label="绑定手机" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.bindMobile }}
                    </template>
                </el-table-column>
                <el-table-column label="结算卡联行号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.bankCode }}
                    </template>
                </el-table-column>
                <el-table-column label="开户名" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.accountName }}
                    </template>
                </el-table-column>
                <el-table-column label="开户账号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.accountNo }}
                    </template>
                </el-table-column>
                <el-table-column label="结算卡类型，对公，对私" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settleBankType }}
                    </template>
                </el-table-column>
                <el-table-column label="结算周期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settlementPeriod }}
                    </template>
                </el-table-column>
                <el-table-column label="结算方式" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settlementMode }}
                    </template>
                </el-table-column>
                <el-table-column label="结算模式, MERCHANT:商户结算，MERGE:合并结算" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settleMode }}
                    </template>
                </el-table-column>
                <el-table-column label="授权使用大商户秘钥" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.authorizationFlag }}
                    </template>
                </el-table-column>
                <el-table-column label="客服联系电话" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.servicePhone }}
                    </template>
                </el-table-column>
                <el-table-column label="银联二维码" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.unionPayQrCode }}
                    </template>
                </el-table-column>
                <el-table-column label="需要开通POS功能（平台商需开通）" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.needPosFunction }}
                    </template>
                </el-table-column>
                <el-table-column label="法人身份证开始日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.idCardStartDate }}
                    </template>
                </el-table-column>
                <el-table-column label="法人身份证结束日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.idCardEndDate }}
                    </template>
                </el-table-column>
                <el-table-column label="经营起始日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.businessDateStart }}
                    </template>
                </el-table-column>
                <el-table-column label="经营期限" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.businessDateLimit }}
                    </template>
                </el-table-column>
                <el-table-column label="开户人身份证" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.accountIdCard }}
                    </template>
                </el-table-column>
                <el-table-column label="" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.isDeleted }}
                    </template>
                </el-table-column>
                <el-table-column label="mcc" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.mcc }}
                    </template>
                </el-table-column>
                <el-table-column label="是否同意协议" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.agreeProtocol }}
                    </template>
                </el-table-column>
                <el-table-column label="回调地址" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.callbackUrl }}
                    </template>
                </el-table-column>
                <el-table-column label="结算人身份证开始日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settlementIdCardStartDate }}
                    </template>
                </el-table-column>
                <el-table-column label="结算人身份证结束日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settlementIdCardEndDate }}
                    </template>
                </el-table-column>
                <el-table-column label="结算人身份证号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settlementIdCardNo }}
                    </template>
                </el-table-column>
                <el-table-column label="结算信息鉴权：STOCK 存量,INCREASE 新增" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.settlementAuth }}
                    </template>
                </el-table-column>
                <el-table-column label="生成者" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createBy }}
                    </template>
                </el-table-column>
                <el-table-column label="更新者" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.updateBy }}
                    </template>
                </el-table-column>
                <el-table-column label="生成时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createDate }}
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.updateDate }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="created_at" label="操作" width="200">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;"
                            @click="handleEdit(scope.$index, scope.row)">
                            {{ scope.row.isSet ? '保存' : "修改" }}
                        </span>
                        <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini"
                            style="cursor: pointer;" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

        <div class="block">
            <!--弹框-->
            <el-dialog :title="titleMap[dialogStatus]" width="85%" :visible.sync="dialogFormVisible">

                <el-steps :active="0">
                    <el-step title="步骤 1" description="填写资料"></el-step>
                    <el-step title="步骤 2" description="上传备案文件"></el-step>
                    <el-step title="步骤 3" description="完成进件"></el-step>
                </el-steps>

                <el-form :inline="true" :label-position="labelPosition" label-width="100px" :model="form">

                    <el-form-item v-if="addForVisible" label="主键">
                        <el-input v-model="form.id" placeholder="主键" auto-complete="off" />
                    </el-form-item>
                    <el-form-item :span="12" label="平台商编">
                        <el-input v-model="form.firstClassMerchantNo" placeholder="平台商编" auto-complete="off" />
                    </el-form-item>
                    <el-form-item :span="12" label="订单号">
                        <el-input v-model="form.orderId" placeholder="订单号" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="子商户签约名">
                        <el-input v-model="form.signName" placeholder="子商户签约名" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="子商户类型">

                        <el-select v-model="form.merchantType" placeholder="子商户类型">
                            <el-option v-for="item in query.merchantTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="经营类别">

                        <el-select v-model="form.merchantCategory" placeholder="经营类别">
                            <el-option v-for="item in query.merchantCategoryOptions" :key="item.value"
                                :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="展示名（收银台展示）">
                        <el-input v-model="form.showName" placeholder="展示名（收银台展示）" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="网站网址">
                        <el-input v-model="form.webSite" placeholder="网站网址" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="接入地址">
                        <el-input v-model="form.accessUrl" placeholder="接入地址" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="法人名字">
                        <el-input v-model="form.legalPerson" placeholder="法人名字" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="法人身份证号">
                        <el-input v-model="form.legalPersonId" placeholder="法人身份证号" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="组织机构代码">
                        <el-input v-model="form.orgNum" placeholder="组织机构代码" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="营业执照号">
                        <el-input v-model="form.businessLicense" placeholder="营业执照号" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="区域编码">
                        <el-input v-model="form.regionCode" placeholder="区域编码" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="行业类型编码">
                        <el-input v-model="form.industryTypeCode" placeholder="行业类型编码" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="通讯地址">
                        <el-input v-model="form.address" placeholder="通讯地址" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="form.linkMan" placeholder="联系人" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="form.linkPhone" placeholder="联系人" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="联系邮箱">
                        <el-input v-model="form.email" placeholder="联系邮箱" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="绑定手机">
                        <el-input v-model="form.bindMobile" placeholder="绑定手机" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="结算卡联行号">
                        <el-input v-model="form.bankCode" placeholder="结算卡联行号" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="开户名">
                        <el-input v-model="form.accountName" placeholder="开户名" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="开户账号">
                        <el-input v-model="form.accountNo" placeholder="开户账号" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="结算卡类型">
                        <el-select v-model="form.settleBankType" placeholder="结算卡类型">
                            <el-option v-for="item in query.settleBankTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算周期">

                        <el-select v-model="form.settlementPeriod" placeholder="结算周期">
                            <el-option v-for="item in query.settlementPeriodOptions" :key="item.value"
                                :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算方式">
                        <el-select v-model="form.settlementMode" placeholder="结算方式">
                            <el-option v-for="item in query.settlementModeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算模式">

                        <el-select v-model="form.settleMode" placeholder="结算模式">
                            <el-option v-for="item in query.settleModeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权使用大商户秘钥">
                        <el-input v-model="form.authorizationFlag" placeholder="授权使用大商户秘钥" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="客服联系电话">
                        <el-input v-model="form.servicePhone" placeholder="客服联系电话" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="银联二维码">
                        <el-input v-model="form.unionPayQrCode" placeholder="银联二维码" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="需要开通POS功能（平台商需开通）">
                        <el-input v-model="form.needPosFunction" placeholder="需要开通POS功能（平台商需开通）" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="法人身份证开始日期">
                        <el-input v-model="form.idCardStartDate" placeholder="法人身份证开始日期" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="法人身份证结束日期">
                        <el-input v-model="form.idCardEndDate" placeholder="法人身份证结束日期" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="经营起始日期">
                        <el-input v-model="form.businessDateStart" placeholder="经营起始日期" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="经营期限">
                        <el-input v-model="form.businessDateLimit" placeholder="经营期限" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="开户人身份证">
                        <el-input v-model="form.accountIdCard" placeholder="开户人身份证" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="mcc">
                        <el-input v-model="form.mcc" placeholder="mcc" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="是否同意协议">
                        <el-input v-model="form.agreeProtocol" placeholder="是否同意协议" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="回调地址">
                        <el-input v-model="form.callbackUrl" placeholder="回调地址" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="结算人身份证开始日期">
                        <el-input v-model="form.settlementIdCardStartDate" placeholder="结算人身份证开始日期"
                            auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="结算人身份证结束日期">
                        <el-input v-model="form.settlementIdCardEndDate" placeholder="结算人身份证结束日期" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="结算人身份证号">
                        <el-input v-model="form.settlementIdCardNo" placeholder="结算人身份证号" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="结算信息鉴权">

                        <el-select v-model="form.settlementAuth" placeholder="结算信息鉴权">
                            <el-option v-for="item in query.settlementAuthOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input v-model="form.remark" placeholder="备注" auto-complete="off" />
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEditSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    </div>

</template>

<script>
import { getList, doDelete, doEdit } from '@/api/MerchantEntry/'
import { getDictionaryGroup, getReferencedDictionaryList } from '@/api/dictionary'
import { getOrganId, getOrganPath, handleBuildTreeDataStruct } from '@/api/utils'

export default {
    data() {
        return {
            list: null,
            listLoading: true,
            total: 5,
            currentPage: 1,
            pageSize: 10,
            dialogFormVisible: false,
            addForVisible: false,
            labelPosition: 'right',
            form: {
                id: '',
                firstClassMerchantNo: '',
                orderId: '',
                signName: '',
                merchantType: '',
                merchantCategory: '',
                showName: '',
                webSite: '',
                accessUrl: '',
                legalPerson: '',
                legalPersonId: '',
                orgNum: '',
                businessLicense: '',
                regionCode: '',
                industryTypeCode: '',
                address: '',
                linkMan: '',
                linkPhone: '',
                email: '',
                bindMobile: '',
                bankCode: '',
                accountName: '',
                accountNo: '',
                settleBankType: '',
                settlementPeriod: '',
                settlementMode: '',
                settleMode: '',
                authorizationFlag: '',
                servicePhone: '',
                unionPayQrCode: '',
                needPosFunction: '',
                idCardStartDate: '',
                idCardEndDate: '',
                businessDateStart: '',
                businessDateLimit: '',
                accountIdCard: '',
                isDeleted: '',
                mcc: '',
                agreeProtocol: '',
                callbackUrl: '',
                settlementIdCardStartDate: '',
                settlementIdCardEndDate: '',
                settlementIdCardNo: '',
                settlementAuth: '',
                createBy: '',
                updateBy: '',
                createDate: '',
                updateDate: '',
                remark: ''
            },
            // 新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            // 新增和编辑弹框标题
            dialogStatus: '',
            query: {
                params: {
                    id: '',
                    firstClassMerchantNo: '',
                    orderId: '',
                    signName: '',
                    merchantType: '',
                    merchantCategory: '',
                    showName: '',
                    webSite: '',
                    accessUrl: '',
                    legalPerson: '',
                    legalPersonId: '',
                    orgNum: '',
                    businessLicense: '',
                    regionCode: '',
                    industryTypeCode: '',
                    address: '',
                    linkMan: '',
                    linkPhone: '',
                    email: '',
                    bindMobile: '',
                    bankCode: '',
                    accountName: '',
                    accountNo: '',
                    settleBankType: '',
                    settlementPeriod: '',
                    settlementMode: '',
                    settleMode: '',
                    authorizationFlag: '',
                    servicePhone: '',
                    unionPayQrCode: '',
                    needPosFunction: '',
                    idCardStartDate: '',
                    idCardEndDate: '',
                    businessDateStart: '',
                    businessDateLimit: '',
                    accountIdCard: '',
                    isDeleted: '',
                    mcc: '',
                    agreeProtocol: '',
                    callbackUrl: '',
                    settlementIdCardStartDate: '',
                    settlementIdCardEndDate: '',
                    settlementIdCardNo: '',
                    settlementAuth: '',
                    createBy: '',
                    updateBy: '',
                    createDate: '',
                    updateDate: '',
                    remark: ''
                },
                timeValue: '',
                options: [{
                    value: '1',
                    label: '黄金糕'
                }, {
                    value: '2',
                    label: '双皮奶'
                }],
                settlementAuthOptions: [],
                settleBankTypeOptions: [],
                settleModeOptions: [],
                settlementPeriodOptions: [],
                merchantCategoryOptions: [],
                settlementModeOptions: [],
                merchantTypeOptions: [],
                value: ''
            }
        }
    },
    created() {
        this.handleInitSettlementAuth()
        this.handleInitSettleBankType()
        this.handleInitMerchantCategory()
        this.handleInitSettlementPeriod()
        this.handleInitSettleMode()
        this.handleInitSettlementMode()
        this.handleInitSettleMode()
        this.handleInitMerchantType()
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.listLoading = true
            getList(this.query.params, this.currentPage, this.pageSize).then(response => {
                const data = response.data
                this.total = data.totalCount
                this.pageSize = data.pageSize
                this.currentPage = data.currentPage
                this.list = data.entities
                this.listLoading = false
            })
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
            this.fetchData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },
        // 新增
        handleAdd() {
            // 显示弹框
            this.dialogFormVisible = true
            // 新增弹框标题
            this.dialogStatus = 'add'

            this.form.id = ''
            this.form.firstClassMerchantNo = ''
            this.form.orderId = ''
            this.form.signName = ''
            this.form.merchantType = ''
            this.form.merchantCategory = ''
            this.form.showName = ''
            this.form.webSite = ''
            this.form.accessUrl = ''
            this.form.legalPerson = ''
            this.form.legalPersonId = ''
            this.form.orgNum = ''
            this.form.businessLicense = ''
            this.form.regionCode = ''
            this.form.industryTypeCode = ''
            this.form.address = ''
            this.form.linkMan = ''
            this.form.linkPhone = ''
            this.form.email = ''
            this.form.bindMobile = ''
            this.form.bankCode = ''
            this.form.accountName = ''
            this.form.accountNo = ''
            this.form.settleBankType = ''
            this.form.settlementPeriod = ''
            this.form.settlementMode = ''
            this.form.settleMode = ''
            this.form.authorizationFlag = ''
            this.form.servicePhone = ''
            this.form.unionPayQrCode = ''
            this.form.needPosFunction = ''
            this.form.idCardStartDate = ''
            this.form.idCardEndDate = ''
            this.form.businessDateStart = ''
            this.form.businessDateLimit = ''
            this.form.accountIdCard = ''
            this.form.isDeleted = ''
            this.form.mcc = ''
            this.form.agreeProtocol = ''
            this.form.callbackUrl = ''
            this.form.settlementIdCardStartDate = ''
            this.form.settlementIdCardEndDate = ''
            this.form.settlementIdCardNo = ''
            this.form.settlementAuth = ''
            this.form.createBy = ''
            this.form.updateBy = ''
            this.form.createDate = ''
            this.form.updateDate = ''
            this.form.remark = ''
            this.addForVisible = false
        },
        // 编辑
        handleEdit(index, row) {
            console.log(index)
            console.log(row)
            this.form.id = row.id
            this.form.firstClassMerchantNo = row.firstClassMerchantNo
            this.form.orderId = row.orderId
            this.form.signName = row.signName
            this.form.merchantType = row.merchantType
            this.form.merchantCategory = row.merchantCategory
            this.form.showName = row.showName
            this.form.webSite = row.webSite
            this.form.accessUrl = row.accessUrl
            this.form.legalPerson = row.legalPerson
            this.form.legalPersonId = row.legalPersonId
            this.form.orgNum = row.orgNum
            this.form.businessLicense = row.businessLicense
            this.form.regionCode = row.regionCode
            this.form.industryTypeCode = row.industryTypeCode
            this.form.address = row.address
            this.form.linkMan = row.linkMan
            this.form.linkPhone = row.linkPhone
            this.form.email = row.email
            this.form.bindMobile = row.bindMobile
            this.form.bankCode = row.bankCode
            this.form.accountName = row.accountName
            this.form.accountNo = row.accountNo
            this.form.settleBankType = row.settleBankType
            this.form.settlementPeriod = row.settlementPeriod
            this.form.settlementMode = row.settlementMode
            this.form.settleMode = row.settleMode
            this.form.authorizationFlag = row.authorizationFlag
            this.form.servicePhone = row.servicePhone
            this.form.unionPayQrCode = row.unionPayQrCode
            this.form.needPosFunction = row.needPosFunction
            this.form.idCardStartDate = row.idCardStartDate
            this.form.idCardEndDate = row.idCardEndDate
            this.form.businessDateStart = row.businessDateStart
            this.form.businessDateLimit = row.businessDateLimit
            this.form.accountIdCard = row.accountIdCard
            this.form.isDeleted = row.isDeleted
            this.form.mcc = row.mcc
            this.form.agreeProtocol = row.agreeProtocol
            this.form.callbackUrl = row.callbackUrl
            this.form.settlementIdCardStartDate = row.settlementIdCardStartDate
            this.form.settlementIdCardEndDate = row.settlementIdCardEndDate
            this.form.settlementIdCardNo = row.settlementIdCardNo
            this.form.settlementAuth = row.settlementAuth
            this.form.createBy = row.createBy
            this.form.updateBy = row.updateBy
            this.form.createDate = row.createDate
            this.form.updateDate = row.updateDate
            this.form.remark = row.remark
            this.addForVisible = true
            // 显示弹框
            this.dialogFormVisible = true
            // 编辑弹框标题
            this.dialogStatus = 'edit'
        },
        handleDelete(index, row) {
            console.log(index)
            console.log(row)

            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                doDelete(row.id).then(response => {
                    const data = response.data
                    console.log(data)
                    if (data.status == 1) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.fetchData();
                    } else if (data.status == 403) {
                        this.$message({
                            type: 'warning',
                            message: data.description
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: '操作失败!'
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleEditSave() {
            debugger

            doEdit(this.form).then(response => {
                debugger
                console.log(response)
                const data = response.data
                if (data.status) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    })
                    this.fetchData();
                } else {
                    this.$message({
                        type: 'info',
                        message: '操作失败!'
                    })
                }
                this.listLoading = false
                this.dialogFormVisible = false
            })
        },
        handleReset() {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleInitSettlementAuth() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantEntrySettlementAuth", organId: getOrganId() }).then(response => {
                const data = response.data
                let settlementAuthOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    settlementAuthOptions.push(option)
                }
                this.query.settlementAuthOptions = settlementAuthOptions
            })
        },
        handleInitSettleBankType() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantEntrySettleBankType", organId: getOrganId() }).then(response => {
                const data = response.data
                let settleBankTypeOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    settleBankTypeOptions.push(option)
                }
                this.query.settleBankTypeOptions = settleBankTypeOptions
            })
        },

        handleInitSettleMode() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantEntrySettleMode", organId: getOrganId() }).then(response => {
                const data = response.data
                let settleModeOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    settleModeOptions.push(option)
                }
                this.query.settleModeOptions = settleModeOptions
            })
        },
        handleInitSettlementPeriod() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantEntrySettlementPeriod", organId: getOrganId() }).then(response => {
                const data = response.data
                let settlementPeriodOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    settlementPeriodOptions.push(option)
                }
                this.query.settlementPeriodOptions = settlementPeriodOptions
            })
        },
        handleInitMerchantCategory() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantEntryMerchantCategory", organId: getOrganId() }).then(response => {
                const data = response.data
                let merchantCategoryOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    merchantCategoryOptions.push(option)
                }
                this.query.merchantCategoryOptions = merchantCategoryOptions
            })
        },
        handleInitSettlementMode() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantEntrySettlementMode", organId: getOrganId() }).then(response => {
                const data = response.data
                let settlementModeOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    settlementModeOptions.push(option)
                }
                this.query.settlementModeOptions = settlementModeOptions
            })
        },
        handleInitMerchantType() {

            getDictionaryGroup({ sys: 1, bigType: "MerchantType", organId: getOrganId() }).then(response => {
                const data = response.data
                let merchantTypeOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    merchantTypeOptions.push(option)
                }
                this.query.merchantTypeOptions = merchantTypeOptions
            })
        }
    }
}
</script>
